html, body { height: 100%; }
    body { margin: 0; }

    body{
      background:#cfcfcf; 
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      display:flex;
      justify-content:center;
      align-items:stretch;
    }

    .login-app{
      width: min(430px, 100vw);    
      min-height: 100vh;
      background:#efefef;
      position:relative;
      overflow:hidden;
    }

    .login-topbar{
      background:#0b84ff;
      padding-top: env(safe-area-inset-top);
      height: calc(54px + env(safe-area-inset-top));
      display:flex;
      align-items:flex-end;
    }
    .login-topbar-row{
      height:54px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:0 12px;
      width:100%;
    }
    .login-back{
      width:28px;height:28px;
      display:grid;place-items:center;
      border:0;background:transparent;
      padding:0; cursor:pointer;
    }
    .login-title{
      color:#fff;
      font-size:17px;
      font-weight:450;
      line-height:1;
    }

    .login-content{
      padding: 0px 0px 96px; /* bottom space for nav */
    }

    .login-field{
      width: 94%;
      height: 52px;
      background:#fff;
      border-radius: 24px;
      display:flex;
      align-items:center;
      padding: 0 14px;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }
    .login-ico{
        width:19px;
        height:19px;
        opacity:1;
        flex: 0 0 auto;
        margin-right:10px;
        object-fit:contain;
        display:block;
    }

    .login-input{
      width:100%;
      border:0;
      outline:none;
      background:transparent;
      font-size:16px;
      color:#333;
    }
    .login-input::placeholder{ color:#9e9e9e; }

    .login-primary{
      margin: 14px auto 0;
      width: 53%;
      height: 43px;
      border-radius: 4px;
      background:#0081ff;
      color:#fff;
      border:0;
      font-size:16px;
      font-weight:500;
      display:block;
      box-shadow: 0 8px 16px rgba(11,132,255,.18);
      cursor:pointer;
    }
    .login-actions{
      margin: 25px auto 0;
      width: 78%;
      display:flex;
      justify-content:space-between;
      gap:16px;
    }
    .login-pill{
      flex:1;
      height: 38px;
      border:0;
      background:#fff;
      border-radius: 999px;
      font-size:15px;
      font-weight:550;
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      cursor:pointer;
    }

    .login-nav{
      position:absolute;
      left:0; right:0; bottom:0;
      background:#fff;
      border-top:1px solid rgba(0,0,0,.08);
      padding: 2px 12px calc(8px + env(safe-area-inset-bottom));
    }
    .login-tabs{
      display:flex;
      justify-content:space-around;
      align-items:flex-end;
    }
    .login-tab{
      width:90px;
      text-decoration:none;
      color:#9aa0a6;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:0px;
      font-size:12px;
      padding: 6px 0;
    }
    .login-tab svg{ width:22px; height:22px; }
    .login-tab.active{ color:#0b84ff; }