*{box-sizing:border-box}
:root{--purple:#39004f;--purple2:#a900e8;--purple3:#65008f;--ink:#17131b;--muted:#9da0a5;--line:#d8d8dc}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.topbar{height:104px;background:var(--purple);display:flex;align-items:center;padding:0 10px 0 18px;gap:14px}
.menu-button{width:34px;height:34px;border:0;background:transparent;padding:5px 0;display:flex;flex-direction:column;justify-content:center;gap:5px;flex-shrink:0}
.menu-button span{height:4px;width:32px;background:#fff;border-radius:1px}
.brand{display:flex;align-items:center;min-width:0;flex:1}
.brand-logo{width:min(210px,100%);height:54px;object-fit:contain;object-position:left center}
.top-actions{display:flex;gap:7px;align-items:center}
.btn{height:42px;min-width:116px;padding:0 15px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap}
.btn-signup,.btn-gradient{background:linear-gradient(115deg,#c05aff 0%,#a400e9 54%,#4b0069 100%);box-shadow:0 2px 5px #0002}
.btn-login-outline{border:1px solid #fff;background:transparent;min-width:116px}
.page{width:min(100%,620px);margin:0 auto;padding:72px 45px 70px}
.download-banner{display:block;width:100%;margin:0 auto 44px}
.download-banner img{display:block;width:100%;height:auto;max-height:112px;object-fit:contain}
.login-area h1{text-align:center;font-size:24px;line-height:1.25;font-weight:700;margin:0 0 46px;color:#111}
.username-row{height:71px;border:1px solid var(--line);border-radius:13px;display:flex;overflow:hidden}
.select-wrap{width:29%;min-width:120px;background:#f2f3f5;border-right:1px solid var(--line);display:flex;align-items:center;padding:0 12px}
.select-wrap select{width:100%;border:0;outline:0;background:transparent;color:#29313c;font-size:16px;font-weight:600;appearance:auto}
.username-row input,.password-wrap input{min-width:0;flex:1;border:0;outline:0;padding:0 19px;font:20px Arial,sans-serif;color:#222;background:#fff}
input::placeholder{color:#a5a8ad;opacity:1}
.text-link{display:inline-block;color:#351044;font-size:16px;font-weight:600;text-decoration:underline}
.forgot-user{margin-top:17px;margin-bottom:31px}
.password-wrap{height:71px;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;overflow:hidden}
.password-wrap input{height:100%;padding-right:6px}
.eye-button{height:100%;width:58px;flex-shrink:0;border:0;background:#fff;display:grid;place-items:center}
.eye-button svg{width:31px;height:31px;fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.forgot-pass{margin-top:17px;margin-bottom:32px}
.btn-main{height:66px;width:100%;border:1px solid #e4e4e4;border-radius:7px;background:#fff;color:#b7b7b7;font-size:24px;font-weight:700;box-shadow:0 2px 7px #0000000d}
.btn-gradient{height:65px;width:100%;border:0;border-radius:7px;color:#fff;font-size:23px;font-weight:700;display:flex;align-items:center;justify-content:center;text-decoration:none}
.demo-button{margin-top:13px}
.whatsapp-button{margin-top:29px;border:1px solid #29003b;box-shadow:0 2px 5px #0002}
.whatsapp-icon{font-size:26px;margin-right:12px;line-height:1}
.share-button{margin-top:13px;height:67px;width:100%;border:1px solid #351044;border-radius:10px;background:#fff;color:#351044;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:13px}
.share-button svg{height:27px;width:27px;fill:none;stroke:currentColor;stroke-width:1.8}
.new-user{text-align:center;margin:44px 0 0;font-size:24px;font-weight:700;color:#111}
.new-user a{color:#a329cf;text-decoration:underline}
.notice{min-height:20px;text-align:center;color:#6a167f;font-size:14px}
.site-footer{display:flex;justify-content:center;gap:20px;padding:20px;color:#777;font-size:12px}
.site-footer a{color:inherit}
@media(max-width:480px){
 .topbar{height:104px;padding-left:17px;padding-right:7px;gap:10px}
 .brand-logo{width:min(194px,100%);height:48px}
 .btn{min-width:0;width:91px;height:41px;padding:0 8px;font-size:13px}
 .btn-login-outline{width:91px;min-width:0}
 .page{padding:72px 45px 60px}
 .download-banner{margin-bottom:44px}
 .login-area h1{font-size:24px;margin-bottom:46px}
 .username-row,.password-wrap{height:71px}
 .select-wrap{min-width:0;width:29%;padding:0 12px}
 .select-wrap select{font-size:16px}
 .username-row input,.password-wrap input{font-size:20px;padding-left:19px}
 .btn-main{height:66px;font-size:24px}
 .btn-gradient{height:65px;font-size:23px}
 .share-button{height:67px;font-size:21px}
 .new-user{font-size:24px}
}
@media(max-width:360px){
 .topbar{gap:7px}
 .brand-logo{width:142px}
 .btn{width:75px;font-size:11px}
 .btn-login-outline{width:75px}
 .page{padding-left:24px;padding-right:24px}
 .share-button{font-size:18px}
}


/* Reference-matched Android sizing: CSS pixels account for the screenshot's
   device-pixel ratio so the rendered layout stays compact like the reference. */
@media (max-width: 600px) {
  .topbar {
    height: 63px;
    padding: 0 4px 0 11px;
    gap: 8px;
  }
  .menu-button {
    width: 20px;
    height: 22px;
    padding: 3px 0;
    gap: 3px;
  }
  .menu-button span {
    width: 20px;
    height: 2px;
  }
  .brand-logo {
    width: min(116px, 100%);
    height: 33px;
  }
  .top-actions { gap: 4px; }
  .btn {
    width: 77px;
    min-width: 0;
    height: 25px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 8.5px;
  }
  .btn-login-outline { width: 70px; min-width: 0; }
  .page {
    width: 100%;
    max-width: 620px;
    padding: 44px 27px 42px;
  }
  .download-banner { margin: 0 auto 26px; }
  .download-banner img { max-height: 60px; }
  .login-area h1 {
    font-size: 14.5px;
    line-height: 1.25;
    margin: 0 0 27px;
  }
  .username-row {
    height: 42px;
    border-radius: 8px;
  }
  .select-wrap {
    width: 100px;
    min-width: 100px;
    padding: 0 8px;
  }
  .select-wrap select {
    font-size: 9.5px;
  }
  .username-row input,
  .password-wrap input {
    padding: 0 12px;
    font-size: 12px;
  }
  .text-link {
    font-size: 10px;
  }
  .forgot-user {
    margin-top: 10px;
    margin-bottom: 18px;
  }
  .password-wrap {
    height: 42px;
    border-radius: 8px;
  }
  .password-wrap input { padding-right: 3px; }
  .eye-button { width: 35px; }
  .eye-button svg { width: 22px; height: 22px; }
  .forgot-pass {
    margin-top: 10px;
    margin-bottom: 19px;
  }
  .btn-main {
    height: 39px;
    border-radius: 4px;
    font-size: 14px;
  }
  .btn-gradient {
    height: 39px;
    border-radius: 4px;
    font-size: 14px;
  }
  .demo-button { margin-top: 8px; }
  .whatsapp-button {
    height: 40px;
    margin-top: 17px;
    border-radius: 6px;
  }
  .whatsapp-icon { font-size: 17px; margin-right: 7px; }
  .share-button {
    height: 40px;
    margin-top: 8px;
    border-radius: 6px;
    font-size: 13px;
    gap: 8px;
  }
  .share-button svg { width: 17px; height: 17px; }
  .new-user {
    margin-top: 27px;
    font-size: 14.5px;
  }
  .notice { font-size: 9px; }
  .site-footer { font-size: 8px; padding: 12px; }
}

.eye-button { cursor: pointer; touch-action: manipulation; }
.eye-button:focus-visible { outline: 2px solid #8c20bd; outline-offset: -3px; border-radius: 6px; }