/* =====================================================================
 |  login.css - Login / Forgot password
 |  Mpangilio wa mtindo wa mobile-banking: nembo juu kushoto, lugha juu kulia,
 |  maelezo + kadi ya kuingia katikati, mstari wa chini. Skrini moja (bila kuscroll).
 ===================================================================== */
body.login-page{
  --accent:#22a85a; --accent-strong:#12853f;
  --fh:clamp(46px,6.9vh,60px);          /* urefu wa kisanduku/kitufe (hufuata urefu wa skrini) */
  --gap:clamp(12px,2.3vh,22px);
  --lp-ink:#111216; --lp-sub:#3b3d44; --lp-mut:#5d6068;
  --lp-card:rgba(247,243,241,.93); --lp-card-line:rgba(255,255,255,.75);
  --lp-field:#fbf9f8; --lp-field-line:#cdc7c4; --lp-field-ink:#111216;
  --lp-btn:var(--accent-strong); --lp-btn-h:var(--accent);
  --lp-link:var(--accent-strong); --lp-line:rgba(0,0,0,.10);
  min-height:100vh; min-height:100dvh; margin:0; display:flex; flex-direction:column;
  font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif; color:var(--lp-ink);
  background:linear-gradient(180deg,#d9dade 0%,#e6dedc 46%,#f1e2db 100%) !important; position:relative; overflow-x:hidden;
}
body.login-page::before,body.login-page::after{ display:none !important; }
.lp-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.lp-bg svg{ position:absolute; inset:0; width:100%; height:100%; }
.lp-wrap{ position:relative; z-index:2; width:100%; max-width:1150px; margin:0 auto; padding-left:20px; padding-right:20px; box-sizing:border-box; }
body.login-page *{ box-sizing:border-box; }

/* ---- kichwa: nembo kushoto, lugha kulia ---- */
.lp-head{ display:flex; align-items:center; justify-content:space-between; padding-top:clamp(14px,4.4vh,40px); }
.lp-top{ display:flex; align-items:center; gap:14px; min-width:0; }
.lp-top img{ max-height:clamp(44px,8vh,76px); max-width:150px; object-fit:contain; }
.lp-top .lp-brand{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(17px,2.4vh,21px); letter-spacing:.2px; line-height:1.2; color:var(--lp-ink); }
.lp-top .lp-brand small{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:12.5px; color:var(--lp-mut); letter-spacing:.2px; margin-top:2px; }
.lp-lang{ display:flex; align-items:center; gap:9px; font-size:15.5px; color:#2b2d33; white-space:nowrap; cursor:default; }
.lp-lang svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.lp-lang .chev{ width:16px; height:16px; }

/* ---- sehemu kuu ---- */
.lp-stage{ flex:1; display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(30px,5vw,80px); padding-top:clamp(8px,2vh,24px); padding-bottom:clamp(28px,13.7vh,110px); }
.lp-stage.center{ justify-content:center; }
.lp-left{ flex:0 1 480px; min-width:0; }
.lp-left h1{ font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(26px,4.6vh,36px); line-height:1.22; margin:0 0 clamp(8px,1.6vh,14px); color:var(--lp-ink); letter-spacing:-.4px; }
.lp-left p.lead{ font-size:clamp(14px,1.9vh,16.5px); color:var(--lp-sub); margin:0 0 clamp(14px,2.6vh,24px); line-height:1.5; max-width:520px; }
.lp-feats{ display:flex; align-items:center; margin-bottom:clamp(14px,3vh,28px); }
.lp-feat{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:15px; color:#1c1e24; padding:0 24px; border-left:1px solid #cdc4c0; }
.lp-feat:first-child{ padding-left:0; border-left:0; }
.lp-feat svg{ width:46px; height:46px; padding:10px; border-radius:14px; background:#e5f3ea; fill:none; stroke:#1f9d55; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; box-sizing:border-box; }
.lp-feat:nth-child(2) svg{ background:#e6edfb; stroke:#3b63d9; } .lp-feat:nth-child(3) svg{ background:#fdeadb; stroke:#e8731c; }

.lp-slides{ display:grid; grid-template-columns:170px 1fr; gap:12px; padding:10px; border-radius:28px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9); box-shadow:0 18px 40px -26px rgba(80,60,50,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); height:clamp(150px,27vh,190px); }
.ls-text{ position:relative; padding:6px 2px 0 6px; display:flex; flex-direction:column; }
.ls-item{ display:none; } .ls-item.on{ display:block; animation:lsIn .35s ease; }
.ls-item b{ display:block; font-size:15px; line-height:1.25; color:var(--lp-ink); margin-bottom:8px; }
.ls-item p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--lp-mut); }
.ls-dots{ position:absolute; left:6px; bottom:4px; display:flex; gap:7px; }
.ls-dots i{ width:8px; height:8px; border-radius:8px; background:#cfc8c5; cursor:pointer; transition:width .2s,background .2s; }
.ls-dots i.on{ width:24px; background:var(--accent-strong); }
.ls-img{ border-radius:20px; overflow:hidden; background:radial-gradient(circle at 30% 20%,var(--accent) 0%,var(--accent-strong) 50%,#0a2e1f 100%); display:flex; align-items:center; justify-content:center; }
.ls-img svg{ width:100%; height:100%; display:block; }
.ls-pic{ display:none; width:100%; height:100%; } .ls-pic.on{ display:block; animation:lsIn .4s ease; }
@keyframes lsIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

/* ---- kadi ya kuingia ---- */
.lp-right{ flex:0 0 min(470px,100%); display:flex; flex-direction:column; align-items:stretch; }
.lp-stage.center .lp-right{ flex-basis:min(470px,100%); }
.lp-card{ background:var(--lp-card); border:1px solid var(--lp-card-line); border-radius:30px; padding:clamp(22px,5vh,46px) clamp(26px,3.2vw,52px) clamp(20px,4vh,34px); box-shadow:0 24px 50px -34px rgba(70,50,45,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lp-card h2{ margin:0; text-align:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(25px,4.2vh,34px); color:var(--lp-ink); }
.lp-greet{ text-align:center; color:var(--lp-sub); margin:clamp(2px,.8vh,6px) 0 clamp(14px,3.2vh,28px); font-size:clamp(14px,2vh,17px); }
.lp-group{ margin-bottom:var(--gap); }
.lp-lab{ display:block; font-size:14.5px; color:var(--lp-mut); font-weight:400; margin:0 0 clamp(5px,1vh,8px) 2px; }
.lp-field,.pwd-wrap{ position:relative; display:block; }
.lp-in{ display:block; width:100%; height:var(--fh); border:1px solid var(--lp-field-line); background:var(--lp-field); color:var(--lp-field-ink); border-radius:16px; font-size:16px; padding:0 58px 0 20px; box-shadow:none; outline:none; transition:border-color .15s, box-shadow .15s; }
.lp-in:focus{ border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(18,133,63,.14); }
.lp-in::placeholder{ color:#a6a09d; }
.lp-in:-webkit-autofill{ -webkit-box-shadow:0 0 0 100px var(--lp-field) inset; -webkit-text-fill-color:var(--lp-field-ink); }
.lp-ico,.pwd-eye{ position:absolute; top:0; right:0; width:58px; height:var(--fh); display:flex; align-items:center; justify-content:center; color:#2c2e34; }
.lp-ico svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pwd-eye{ cursor:pointer; font-size:19px; z-index:5; }
.pwd-eye:hover{ color:var(--accent-strong); }
.pwd-wrap > .lp-in{ padding-right:58px; }

/* kitufe laini (tambarare, bila mng'ao) */
.btn-login{ display:block; width:100%; height:var(--fh); margin-top:clamp(6px,1.4vh,12px); border:0; border-radius:14px; background:var(--lp-btn); color:#fff; font-size:17px; font-weight:500; letter-spacing:.2px; box-shadow:none; filter:none; transition:background .15s; cursor:pointer; }
.btn-login:hover,.btn-login:focus{ background:var(--lp-btn-h); color:#fff; outline:none; }
.btn-login:active{ transform:translateY(1px); }

.lp-links{ display:flex; align-items:center; justify-content:center; margin-top:clamp(12px,2.4vh,20px); }
.lp-links > a,.lp-links > label{ flex:1; text-align:center; color:var(--lp-link); font-size:15.5px; font-weight:400; margin:0; cursor:pointer; text-decoration:none; }
.lp-links > a:hover{ text-decoration:none; opacity:.8; }
.lp-links .sep{ width:1px; height:24px; background:#cfc8c5; flex:0 0 1px; }
.lp-links.one > a{ flex:1; }
.lp-rem{ display:flex; align-items:center; justify-content:center; gap:9px; }
.lp-rem input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; border:1.5px solid #9d9894; border-radius:5px; background:#fff; cursor:pointer; position:relative; flex:0 0 auto; }
.lp-rem input:checked{ background:var(--accent-strong); border-color:var(--accent-strong); }
.lp-rem input:checked::after{ content:""; position:absolute; left:5px; top:1.5px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

.lp-alert{ border-radius:14px; font-size:14px; padding:11px 14px; margin:0 0 var(--gap); }
.lp-alert.err{ background:#fdecec; color:#9b1c1c; border:1px solid #f6c9c9; } .lp-alert.ok{ background:#e9f8ee; color:#176a35; border:1px solid #bfe7cc; }

.lp-support{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:clamp(12px,2.6vh,24px); color:var(--lp-sub); font-size:14.5px; text-align:center; }
.lp-support svg{ width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ---- mstari wa chini ---- */
.lp-foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 20px; padding-top:clamp(10px,2vh,18px); padding-bottom:clamp(12px,2.4vh,22px); border-top:1px solid var(--lp-line); font-size:14px; color:#3e4047; margin-top:auto; max-width:1150px; padding-left:0; padding-right:0; width:calc(100% - 80px); }

/* ---- skrini ndogo kwa urefu ---- */
@media (max-height:700px){ .lp-slides{ height:clamp(120px,22vh,150px); grid-template-columns:150px 1fr; padding:9px; border-radius:22px; } .ls-item b{ font-size:14px; margin-bottom:5px; } .ls-item p{ font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .ls-text{ padding-bottom:22px; } .lp-feats{ margin-bottom:14px; } .lp-support{ display:none; } }
@media (max-height:600px){ .ls-item p{ display:none; } .lp-left p.lead{ display:none; } .lp-feats{ margin-bottom:10px; } .lp-top .lp-brand small{ display:none; } }

/* ---- tablet / simu: kadi peke yake ---- */
@media (max-height:500px){ .lp-slides{ display:none; } }
@media (max-width:1000px){
  .lp-wrap{ padding-left:22px; padding-right:22px; } .lp-foot{ width:calc(100% - 44px); }
  .lp-left{ display:none; }
  .lp-stage{ justify-content:center; } .lp-right{ flex:0 1 470px; }
}

/* ---- Simu: rangi sawa na desktop (nyepesi, kadi nyeupe, kitufe cha kijani) ---- */
@media (max-width:700px){
  body.login-page{
    --fh:clamp(48px,6.6vh,56px);
    --lp-card:rgba(255,255,255,.96);
  }
  .lp-bg svg{ opacity:.9; }
  .lp-wrap{ padding-left:20px; padding-right:20px; } .lp-foot{ width:calc(100% - 40px); }
  /* Jina + maelezo viko katikati, juu kidogo ya kadi; lugha juu kulia */
  /* Kadi iko katikati kamili ya skrini: safu 3 (juu | kadi | chini), juu na chini ni sawa */
  body.login-page{ display:grid; grid-template-rows:minmax(0,1fr) auto minmax(0,1fr); }
  .lp-foot{ align-self:end; margin-top:0; }
  .lp-head{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-top:calc(46px + env(safe-area-inset-top)); padding-bottom:clamp(10px,2vh,20px); }
  .lp-lang{ position:absolute; top:calc(clamp(14px,2.6vh,24px) + env(safe-area-inset-top)); right:20px; color:#2b2d33; font-size:14.5px; z-index:3; }
  .lp-top{ flex-direction:column; text-align:center; gap:8px; justify-content:center; }
  .lp-top img{ max-height:clamp(34px,5.6vh,52px); }
  .lp-top{ gap:6px; }
  .lp-top .lp-brand{ font-size:21px; text-align:center; } .lp-top .lp-brand small{ margin-top:3px; }
  .lp-stage{ align-items:center; padding-top:0; padding-bottom:0; }
  .lp-right{ flex:1 1 100%; }
  .lp-card{ border-radius:28px; padding:clamp(20px,3.6vh,32px) 22px clamp(18px,3vh,26px); box-shadow:0 24px 50px -30px rgba(70,50,45,.5); }
  .lp-lab{ font-size:14px; } .lp-in{ font-size:16px; border-radius:16px; padding:0 54px 0 18px; }
  .btn-login{ border-radius:14px; }
  .lp-links > a,.lp-links > label{ font-size:14.5px; }
  .lp-support{ font-size:13.5px; flex-direction:column; gap:6px; }
  .lp-foot{ justify-content:center; text-align:center; color:#2b2f3a; text-shadow:0 0 6px rgba(255,250,244,.95),0 0 12px rgba(255,250,244,.9); font-size:12.5px; padding-bottom:calc(clamp(12px,2.4vh,20px) + env(safe-area-inset-bottom)); }
}

@media (max-width:700px) and (max-height:740px){ .lp-top img{ max-height:34px; } .lp-top .lp-brand{ font-size:18px; } .lp-top .lp-brand small{ display:none; } .lp-head{ padding-top:calc(40px + env(safe-area-inset-top)); } }

/* ---- kubadili lugha ---- */
.lp-langbox{ position:relative; }
.lp-lang{ background:none; border:0; padding:6px 4px; font-family:inherit; cursor:pointer; }
.lp-lang:hover{ color:var(--accent-strong); }
.lp-lang .chev{ transition:transform .2s; } .lp-langbox.open .chev{ transform:rotate(180deg); }
.lp-langmenu{ display:none; position:absolute; right:0; top:calc(100% + 6px); min-width:170px; background:#fff; border:1px solid #e3dcd8; border-radius:14px; box-shadow:0 18px 40px -18px rgba(60,40,35,.45); padding:6px; z-index:20; }
.lp-langbox.open .lp-langmenu{ display:block; }
.lp-langmenu a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border-radius:10px; color:#24262c; font-size:15px; text-decoration:none; }
.lp-langmenu a:hover{ background:#f3eeec; }
.lp-langmenu a.on{ font-weight:600; color:var(--accent-strong); }
.lp-langmenu a.on::after{ content:"\2713"; }

.lp-head{ position:relative; z-index:30; }
.lp-foot{ padding-left:20px; padding-right:20px; }

.lp-langmenu .ln{ display:flex; align-items:center; gap:12px; } .lp-langmenu .fl{ width:26px; height:18px; border-radius:3px; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.12); display:block; }
.lp-langmenu a{ padding:10px 14px; }

/* ---- hali ya "Loading" baada ya kubonyeza Ingia (kama NMB) ---- */
.lp-card{ position:relative; }
.lp-card.is-loading .lp-in{ background:#d9d4d1; border-color:#cbc5c2; color:#5d5a58; pointer-events:none; }
.lp-card.is-loading .lp-ico,.lp-card.is-loading .pwd-eye,.lp-card.is-loading .lp-lab{ opacity:.55; pointer-events:none; }
.lp-card.is-loading .btn-login{ background:#cdc8c6; color:#6b6866; pointer-events:none; }
.lp-card.is-loading .lp-links{ opacity:.6; pointer-events:none; }
.lp-card.is-loading::after{ content:""; position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; z-index:5;
  background:conic-gradient(from 0deg,#f7931e,#e8467c,#9a7cf5,#3b82f6,#f7931e);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  animation:lpSpin .9s linear infinite; }
@keyframes lpSpin{ to{ transform:rotate(360deg); } }
@media (max-width:700px){
  .lp-langbox{ position:absolute; top:calc(clamp(14px,2.6vh,24px) + env(safe-area-inset-top)); right:20px; z-index:30; }
  .lp-langbox .lp-lang{ position:static; color:#fff; font-size:14.5px; padding:4px 2px; }
  .lp-langmenu{ min-width:160px; }
}

@media (min-width:701px){ .lp-card{ background:rgba(255,255,255,.96); } .lp-top .lp-brand{ color:#0b1230; } .lp-lab{ font-weight:500; color:#2b2f3a; } .lp-in::placeholder{ color:#9a9fa9; } }

/* ---- v2: kama picha ya mfano ---- */
.lp-logo{ width:52px; height:52px; border-radius:14px; background:linear-gradient(145deg,#2bb866,#12853f); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -12px rgba(18,133,63,.8); flex:0 0 auto; }
.lp-logo svg{ width:30px; height:30px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lp-top .lp-brand{ font-size:clamp(20px,3vh,26px); }
.lp-left h1{ font-weight:700; font-size:clamp(28px,4.9vh,40px); line-height:1.12; color:#0b1230; letter-spacing:-.8px; }
.lp-left p.lead{ font-size:clamp(15px,2.2vh,19px); color:#4a4f5c; }
.lp-feat{ font-size:clamp(14px,2vh,17px); font-weight:700; color:#0b1230; }
.lp-feat svg{ width:clamp(42px,6.4vh,54px); height:clamp(42px,6.4vh,54px); padding:11px; }
.lp-slides{ border-radius:30px; box-shadow:0 24px 50px -30px rgba(40,30,20,.45); }
.ls-item b{ font-size:16.5px; color:#0b1230; } .ls-item p{ color:#5a5f6c; }
.ls-dots i.on{ background:var(--accent-strong); }
.lp-in.has-l{ padding-left:56px; }
.lp-ico.l{ right:auto; left:0; width:54px; color:#3a3f4b; }
.lp-ico.l svg{ width:22px; height:22px; }
.lp-greet{ display:flex; align-items:center; justify-content:center; gap:10px; }
.lp-greet .gi svg{ width:26px; height:26px; fill:none; stroke:#f5b300; stroke-width:2; stroke-linecap:round; display:block; }
.btn-login{ background:linear-gradient(180deg,#1f9d55,#12853f); font-weight:700; font-size:18px; box-shadow:0 12px 22px -14px rgba(18,133,63,.9); display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-login:hover,.btn-login:focus{ background:linear-gradient(180deg,#22a85a,#0f7a39); }
.btn-login svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.lp-links a{ font-weight:600; }
.lp-lab{ font-weight:500; }
@media (max-width:700px){ .lp-in.has-l{ padding-left:52px; } .lp-logo{ width:46px; height:46px; } .lp-top .lp-brand{ color:#0b1230; } }
@media (min-width:701px){ .lp-foot{ color:#2b2f3a; text-shadow:0 0 6px rgba(255,250,244,.95),0 0 12px rgba(255,250,244,.9); font-weight:500; } }
@media (max-width:700px){ .lp-langbox .lp-lang,.lp-lang{ color:#2b2d33 !important; } .lp-bg svg{ opacity:1; } }

/* ---- mandharinyuma ya picha ---- */
.lp-bg picture,.lp-bg img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.lp-bg img{ object-fit:cover; object-position:30% 50%; }
.lp-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,252,246,.85) 0,rgba(255,252,246,0) 150px),linear-gradient(0deg,rgba(255,252,246,.92) 0,rgba(255,252,246,0) 120px),linear-gradient(90deg,rgba(255,252,246,.95) 0%,rgba(255,252,246,.88) 42%,rgba(255,252,246,.30) 66%,rgba(255,252,246,0) 100%); }
@media (max-width:700px){
  .lp-bg img{ object-position:50% 50%; }
  .lp-veil{ background:linear-gradient(180deg,rgba(255,252,246,.9) 0%,rgba(255,252,246,.6) 25%,rgba(255,252,246,.22) 45%,rgba(255,252,246,.22) 65%,rgba(255,252,246,.9) 100%); }
}

/* ---- simu: picha juu (kichwa) + kadi inayopishana ---- */
@media (max-width:700px){
  body.login-page{ background:#f7f1e8 !important; grid-template-rows:auto auto 1fr; }
  .lp-bg{ bottom:auto; height:clamp(270px,38vh,340px); }
  .lp-bg img{ object-position:45% 40%; }
  .lp-veil{ background:linear-gradient(180deg,rgba(255,252,246,.82) 0%,rgba(255,252,246,.45) 55%,rgba(247,241,232,.0) 78%,#f7f1e8 100%); }
  .lp-head{ justify-content:flex-start; padding-top:calc(54px + env(safe-area-inset-top)); padding-bottom:clamp(40px,7vh,60px); }
  .lp-stage{ align-items:flex-start; margin-top:-30px; }
  .lp-foot{ align-self:end; padding-top:14px; text-shadow:none; }
  .lp-card{ box-shadow:0 22px 44px -24px rgba(40,60,45,.45); border:1px solid rgba(255,255,255,.9); }
}
@media (max-width:700px){
  .lp-card{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .lp-bg{ height:clamp(300px,42vh,370px); }
  .lp-veil{ background:linear-gradient(180deg,rgba(255,252,246,.9) 0%,rgba(255,252,246,.8) 38%,rgba(255,252,246,.25) 62%,rgba(247,241,232,0) 80%,#f7f1e8 100%); }
  .lp-top .lp-brand small{ color:#3b3f4a; font-weight:600; }
}
/* ---- usomekaji: nembo + jina kwenye kifuko cha kioo ---- */
@media (max-width:700px){
  .lp-veil{ background:linear-gradient(180deg,rgba(255,252,246,.12) 0%,rgba(255,252,246,.05) 45%,rgba(247,241,232,0) 72%,#f7f1e8 100%); }
  .lp-top{ background:rgba(255,255,255,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:22px; padding:12px 22px 14px; box-shadow:0 14px 30px -18px rgba(30,40,30,.5); border:1px solid rgba(255,255,255,.9); }
  .lp-lang{ background:rgba(255,255,255,.86); border-radius:999px; padding:6px 12px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .lp-bg{ height:clamp(310px,44vh,380px); }
  .lp-head{ padding-top:calc(60px + env(safe-area-inset-top)); }
}
@media (min-width:701px){
  .lp-left h1,.lp-left p.lead{ text-shadow:0 0 14px rgba(255,252,246,.95),0 0 28px rgba(255,252,246,.8); }
  .lp-top{ background:rgba(255,255,255,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:18px; padding:8px 18px 8px 10px; margin-left:-10px; }
}
@media (min-width:701px){ .lp-lang{ background:rgba(255,255,255,.78); border-radius:999px; padding:7px 14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } }

/* ---- Kuoanisha swichi ya lugha iliyopo (login-lang) na nafasi ya reference ---- */
body.login-page .login-lang{
  position: absolute; top: calc(18px + env(safe-area-inset-top)); right: 18px; left: auto;
  display: flex; gap: 6px; z-index: 30; margin: 0; background: none; padding: 0;
}
body.login-page .login-lang button{ padding: 5px 7px; font-size: 11px; }
@media (max-width:700px){
  body.login-page .login-lang{ top: calc(18px + env(safe-area-inset-top)); right: 14px; }
}

/* ---- menyu ya lugha: vitufe vya POST (badala ya <a>) vionekane kama reference ---- */
.lp-langmenu form{ margin:0; display:flex; flex-direction:column; }
.lp-langmenu button{ display:flex; align-items:center; gap:14px; width:100%; padding:10px 12px; border:0; background:none; border-radius:10px; color:#24262c; font-size:15px; font-family:inherit; text-align:left; cursor:pointer; }
.lp-langmenu button:hover{ background:#f3eeec; }
.lp-langmenu button.on{ font-weight:600; color:var(--accent-strong); }
.lp-langmenu button.on::after{ content:"\2713"; margin-left:auto; }
.lp-langmenu .ln{ display:flex; align-items:center; gap:12px; }
.lp-langmenu .flag{ width:24px; height:16px; border-radius:3px; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.12); }

/* ---- Kuzidi sheria za jumla za app.css (input[type=...] zina specificity kubwa
   kuliko .lp-in) ili visanduku vya Username/Password vibaki kama reference ---- */
body.login-page .lp-in{
  height:var(--fh); border:1px solid var(--lp-field-line); background:var(--lp-field);
  border-radius:16px; font-size:16px; padding:0 58px 0 20px; box-shadow:none;
}
body.login-page .lp-in.has-l{ padding-left:56px; }
body.login-page .lp-in:focus{ border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(18,133,63,.14); }
@media (max-width:700px){
  body.login-page .lp-in{ border-radius:16px; padding:0 54px 0 18px; }
  body.login-page .lp-in.has-l{ padding-left:52px; }
}

/* =====================================================================
 |  INSTALL WIZARD (body.iw-page) - muonekano wa login + hatua 4
 ===================================================================== */
.iw-page{ justify-content:flex-start !important; height:auto !important; }
.iw-page svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.iw-page .lp-stage{ align-items:center; padding-bottom:clamp(20px,5vh,48px); }
.iw-left{ flex:0 1 460px; }
.iw-badge{ display:inline-block; background:rgba(18,133,63,.11); color:#0d7a3c; font-weight:700; font-size:12.5px; border-radius:20px; padding:5px 12px; margin-bottom:14px; }
.iw-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.iw-steps li{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(15,23,42,.06); border-radius:14px; padding:11px 14px; transition:border-color .2s, box-shadow .2s, background .2s; }
.iw-steps .n{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:#eef0f3; color:#6b7280; flex:none; font-size:14px; }
.iw-steps .n svg{ display:none; width:18px; height:18px; stroke:#fff; stroke-width:2.6; }
.iw-steps li > div b{ display:block; color:var(--lp-ink); font-size:15px; }
.iw-steps li small{ color:var(--lp-mut); font-size:12.5px; }
.iw-steps li.done{ cursor:pointer; } .iw-steps li.done:hover{ background:#fff; }
.iw-steps li.done .n{ background:var(--accent-strong); } .iw-steps li.done .n b{ display:none; } .iw-steps li.done .n svg{ display:block; }
.iw-steps li.cur{ border-color:var(--accent-strong); box-shadow:0 8px 20px -10px rgba(18,133,63,.45); background:#fff; }
.iw-steps li.cur .n{ background:#e7f6ed; color:#0d7a3c; box-shadow:inset 0 0 0 2px var(--accent-strong); }
.iw-prog{ height:6px; background:rgba(15,23,42,.08); border-radius:4px; margin-top:18px; overflow:hidden; }
.iw-prog i{ display:block; height:100%; width:12.5%; background:var(--accent-strong); border-radius:4px; transition:width .35s ease; }
.iw-prog-l{ display:block; margin-top:6px; color:var(--lp-mut); font-size:12.5px; }

.iw-right{ flex:0 0 min(540px,100%); }
.iw-card{ position:relative; padding:clamp(22px,3.6vh,36px) clamp(22px,2.8vw,40px) clamp(20px,3vh,30px); }
.iw-pane{ display:none; } .iw-pane.on{ display:block; animation:lsIn .3s ease; }
.iw-card-h{ display:flex; gap:14px; align-items:center; margin-bottom:clamp(14px,2.4vh,22px); }
.iw-ic{ width:48px; height:48px; border-radius:14px; background:#e7f6ed; color:#0d7a3c; display:grid; place-items:center; flex:none; }
.iw-ic svg{ width:24px; height:24px; }
.iw-card .iw-card-h h2{ margin:0; text-align:left; font-size:clamp(21px,3vh,25px); }
.iw-card-h p{ margin:2px 0 0; color:var(--lp-mut); font-size:13.5px; }
.iw-page{ --fh:clamp(44px,5.8vh,52px); --gap:clamp(10px,1.6vh,14px); }
.iw-page .lp-in{ font-size:15px; border-radius:13px; }
.iw-page .lp-lab{ font-size:13.5px; }
.iw-g2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.iw-g2-cur{ grid-template-columns:1fr 1fr; }
.lp-group.bad .lp-in{ border-color:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.1); }
.iw-err{ color:#b91c1c; font-size:12.5px; margin:5px 0 0 2px; }
.iw-sep{ display:flex; align-items:center; gap:10px; margin:4px 0 12px; color:var(--lp-mut); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.iw-sep:before,.iw-sep:after{ content:''; flex:1; height:1px; background:#ddd6d2; }

.iw-req{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.iw-req li{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid #e7e1dd; }
.iw-req li.bad{ border-color:#f6c9c9; background:#fff7f7; }
.iw-req .st{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent-strong); flex:none; }
.iw-req .st svg{ width:16px; height:16px; stroke:#fff; stroke-width:2.8; }
.iw-req li.bad .st{ background:#dc2626; }
.iw-req b{ display:block; font-size:14.5px; color:var(--lp-ink); }
.iw-req small{ color:var(--lp-mut); font-size:12.5px; }
.iw-exts{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.iw-exts span{ font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:20px; background:#e7f6ed; color:#0d7a3c; }
.iw-exts span.bad{ background:#fdecec; color:#b91c1c; text-decoration:line-through; }
.iw-mt{ margin-top:12px; margin-bottom:0; }

.iw-test{ width:100%; height:44px; border:1.5px dashed var(--accent-strong); background:#f2faf5; color:#0d7a3c; border-radius:12px; font:inherit; font-weight:700; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; margin-top:2px; }
.iw-test:hover{ background:#e7f6ed; } .iw-test svg{ width:18px; height:18px; }
.iw-test.busy svg{ animation:iwPulse 1s ease-in-out infinite; }
.iw-ok{ display:flex; gap:9px; align-items:flex-start; margin-top:10px; background:#e7f6ed; border-radius:11px; padding:10px 12px; color:#0d6b35; font-size:13.5px; line-height:1.4; }
.iw-ok svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2.6; flex:none; margin-top:1px; }
.iw-ok.warn{ background:#fff6e5; color:#92400e; } .iw-ok.warn svg,.iw-ok.fail svg{ stroke-width:2; }
.iw-ok.fail{ background:#fdecec; color:#9b1c1c; word-break:break-word; }

.iw-nav{ display:flex; gap:10px; margin-top:clamp(16px,2.6vh,22px); }
.iw-back{ height:var(--fh); padding:0 18px; border-radius:14px; border:1px solid #ddd6d2; background:#fff; font:inherit; font-weight:600; color:#374151; display:flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; }
.iw-back:hover{ border-color:var(--accent-strong); color:var(--accent-strong); } .iw-back svg{ width:18px; height:18px; }
.iw-page .btn-login.iw-next{ flex:1; margin:0; display:flex; align-items:center; justify-content:center; gap:9px; font-weight:600; text-decoration:none; }
.iw-page .btn-login svg{ width:20px; height:20px; stroke-width:2; }
.iw-page .btn-login.busy{ opacity:.8; pointer-events:none; }

.iw-sum{ margin:0; border:1px solid #e7e1dd; border-radius:14px; background:#fff; overflow:hidden; }
.iw-sum > div{ display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center; padding:11px 14px; border-top:1px solid #f0ebe8; }
.iw-sum > div:first-child{ border-top:0; }
.iw-sum dt{ display:flex; align-items:center; gap:7px; color:var(--lp-mut); font-size:13px; font-weight:600; }
.iw-sum dt svg{ width:17px; height:17px; color:#0d7a3c; }
.iw-sum dd{ margin:0; min-width:0; } .iw-sum dd b{ display:block; font-size:14.5px; color:var(--lp-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iw-sum dd small{ display:block; color:var(--lp-mut); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iw-sum button{ border:0; background:none; color:var(--accent-strong); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:4px; }
.iw-sample{ display:flex; gap:12px; align-items:flex-start; margin-top:12px; padding:13px 14px; border:1px solid #cdeedd; background:#f2faf5; border-radius:14px; cursor:pointer; }
.iw-sample input{ position:absolute; opacity:0; pointer-events:none; }
.iw-sw{ width:40px; height:23px; border-radius:20px; background:#cfd4da; position:relative; flex:none; margin-top:1px; transition:background .2s; }
.iw-sw:after{ content:''; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s; }
.iw-sample input:checked + .iw-sw{ background:var(--accent-strong); } .iw-sample input:checked + .iw-sw:after{ left:20px; }
.iw-sample input:focus-visible + .iw-sw{ outline:2px solid var(--accent-strong); outline-offset:2px; }
.iw-sample-t b{ display:flex; align-items:center; gap:7px; font-size:14px; color:var(--lp-ink); }
.iw-sample-t b svg{ width:17px; height:17px; color:#0d7a3c; }
.iw-sample-t small{ display:block; font-size:12.5px; color:var(--lp-mut); margin-top:3px; line-height:1.45; }
.iw-note{ text-align:center; color:var(--lp-mut); font-size:13px; margin:12px 0 0; }
.iw-mstep{ display:none; }
@keyframes iwPulse{ 50%{ opacity:.35; } }

@media (max-height:760px){ .iw-left .lead{ display:none; } .iw-steps li{ padding:8px 12px; } .iw-steps li small{ display:none; } }
@media (max-width:1000px){ .iw-page .lp-stage{ align-items:flex-start; } .iw-right{ flex:0 1 560px; } .iw-mstep{ display:block; margin-bottom:16px; } }
@media (max-width:700px){
  body.login-page.iw-page{ display:flex; flex-direction:column; justify-content:flex-start; height:auto; }
  .iw-page .lp-stage{ padding-top:4px; padding-bottom:18px; }
  .iw-g2{ grid-template-columns:1fr; } .iw-g2-cur{ grid-template-columns:1fr 1fr; }
  .iw-card .iw-card-h h2{ font-size:20px; }
  .iw-sum > div{ grid-template-columns:1fr auto; } .iw-sum dt{ grid-column:1 / -1; }
  .iw-back{ padding:0 14px; }
  .iw-page .lp-foot{ margin-top:auto; }
}
.iw-mstep span{ display:block; font-size:12.5px; font-weight:700; color:#0d7a3c; margin-bottom:6px; }
.iw-mstep i{ display:block; height:5px; border-radius:4px; background:rgba(15,23,42,.08); overflow:hidden; }
.iw-mstep i b{ display:block; height:100%; background:var(--accent-strong); border-radius:4px; transition:width .35s; }
/* hatua ya License (fomu tu kwa sasa) */
.iw-mid{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#0f172a; color:#fff; border-radius:14px; padding:13px 16px; }
.iw-mid small{ display:block; color:#94a3b8; font-size:11.5px; letter-spacing:.4px; margin-bottom:3px; }
.iw-mid b{ font-family:ui-monospace,Consolas,monospace; font-size:21px; letter-spacing:2px; }
.iw-cp{ border:1px solid #334155; background:#1e293b; color:#e2e8f0; border-radius:10px; padding:8px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; flex:none; }
.iw-cp:hover{ background:#334155; }
.iw-lic-help{ font-size:13px; color:var(--lp-mut); margin:9px 0 14px; line-height:1.5; } .iw-lic-help b{ color:#0d7a3c; }
#f_license_key,.iw-mono{ font-family:ui-monospace,Consolas,monospace; letter-spacing:.5px; text-transform:uppercase; }
.iw-or{ display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:#8a8f98; font-size:12.5px; }
.iw-or:before,.iw-or:after{ content:''; flex:1; height:1px; background:#ddd6d2; }
.iw-trial{ width:100%; height:46px; border-radius:12px; border:1px solid #ddd6d2; background:#fff; font:inherit; font-weight:600; color:#374151; cursor:pointer; }
.iw-trial:hover{ border-color:var(--accent-strong); color:var(--accent-strong); } .iw-trial small{ color:#8a8f98; font-weight:500; }
@media (max-width:700px){ .iw-mid b{ font-size:18px; letter-spacing:1px; } }