:root{--lp-bg:#121212;--lp-card:#1d1d1d;--lp-line:#353535;--lp-blue:#0a47a8;--lp-blue-h:#0b3f93;--lp-text:#f4f4f4;--lp-mute:#9a9a9a;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--lp-bg)}
body{font-family:"Noto Sans Sinhala","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--lp-text);-webkit-font-smoothing:antialiased}
.lp{max-width:420px;margin:0 auto;min-height:100vh;padding:46px 16px 40px;display:flex;flex-direction:column}
.lp-card{background:var(--lp-card);border-radius:16px;padding:40px 14px 16px;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.lp-logo{width:244px;max-width:78%;aspect-ratio:1;margin:0 auto 42px;background:var(--lp-blue);border-radius:12px;display:grid;place-items:center;overflow:hidden}
.lp-logo img{width:100%;height:100%;object-fit:cover}
.lp-logo svg{width:62%;height:auto}
.lp-h{font-size:20px;font-weight:700;line-height:1.55;text-align:center;margin:0 10px 22px}
.lp-field{position:relative}
.lp-field svg{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-4px;color:var(--lp-blue)}
.lp-input{width:100%;height:48px;background:#121212;border:1px solid var(--lp-line);border-radius:14px;color:var(--lp-text);font:inherit;font-size:16px;padding:0 16px}
.lp-field .lp-input{padding-left:38px}
.lp-input::placeholder{color:#7d7d7d}
.lp-input:focus{outline:none;border-color:#3f6fc0;box-shadow:0 0 0 3px rgba(10,71,168,.35)}
.lp-btn{display:block;width:100%;height:52px;margin-top:16px;border:0;border-radius:14px;background:var(--lp-blue);color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.lp-btn:hover{background:var(--lp-blue-h)}
.lp-btn:disabled{opacity:.65;cursor:wait}
.lp-btn:focus-visible,.lp-link:focus-visible,.lp-terms:focus-visible{outline:2px solid #8fb0ea;outline-offset:2px}
.lp-err{color:#ff8a8a;font-size:14px;min-height:20px;margin:10px 4px 0;line-height:1.4}
.lp-foot{margin-top:auto;padding-top:90px;text-align:center;color:var(--lp-mute);font-size:13px;line-height:1.75;font-family:"Nunito Sans",system-ui,sans-serif}
.lp-terms{display:inline-block;margin-top:40px;background:var(--lp-blue);color:#fff;border:0;border-radius:4px;padding:3px 9px;font:inherit;font-size:12.5px;cursor:pointer}

/* step 2 */
.lp-top{margin:-46px -16px 44px;padding:38px 16px 44px;text-align:center;background:linear-gradient(180deg,#1b1b1b,#141414)}
.lp-top h1{margin:0;font-family:"Nunito Sans",system-ui,sans-serif;font-size:28px;font-weight:800}
.lp-card--otp{padding:30px 16px 22px}
.lp-card--otp .lp-h{text-align:left;margin:0 0 20px;font-size:18.5px}
.lp-label{display:block;font-family:"Nunito Sans",system-ui,sans-serif;font-size:15px;margin:0 0 6px}
.lp-sub{display:flex;justify-content:space-between;margin-top:14px;font-size:13.5px}
.lp-link{background:none;border:0;color:#8fb0ea;font:inherit;cursor:pointer;padding:2px}
.lp-link:disabled{color:#666;cursor:default}
.lp-demo{margin-top:12px;font-size:13px;color:#e8c46a;text-align:center}
[hidden]{display:none!important}

/* terms modal */
.lp-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:16px;z-index:10}
.lp-modal__box{background:#fff;color:#222;max-width:420px;width:100%;max-height:80vh;overflow:auto;border-radius:12px;padding:20px;font-family:"Nunito Sans",system-ui,sans-serif;font-size:14px;line-height:1.55}
.lp-modal__box h2{font-size:17px;margin:0 0 8px} .lp-modal__box h3{font-size:15px;margin:16px 0 4px}
.lp-modal__box .lp-btn{height:44px;font-size:15px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}